<!-- 播放列表 -->
<template>
  <div class="play">
    <div class="shade" @click="shadeClick"></div>
    <div class="play-list" >
      <div>当前播放</div>
      <b-scroll class="content"
                :probe-type="2"
                ref="scroll"
                >
        <div class="list">
          <div class="list-item" v-for="(item,index) in songList">
            <div class="item-name" :style="{color: active(index) }" @click="itemClick(index)">
              <span>{{ item.name }} </span>
              <span :style="{color: active(index) }" > - {{ artistName(item) }}</span>
            </div>
            <div class="delete" @click="deleteClick(index)">X</div>
          </div>
        </div>
      </b-scroll>
    </div>
  </div>
</template>

<script>
import BScroll from "@/components/common/scroll/BScroll";
export default {
  name: "PlayList",
  data() {
    return {
      songList: []
    };
  },
  components: {
    BScroll,
  },
  created() {
    this.songList = this.$store.state.songList;
  },
  updated() {
    this.$refs.scroll.bs.refresh()
    
  },
  methods: {
    active(index) {
      return index == this.$store.state.currentIndex? 'red' : ''
    },
    artistName(data) {
      let name = [];
      for (let item of data.artistName) {
        name.push(item.name);
      }
      return name.join("/");
    },
    //监听事件
    shadeClick() {
      this.$store.commit("isshadeClick");
    },
    itemClick(index) {
      this.$store.commit("songListClick",{index});
    },
    deleteClick(index) {
      this.$store.commit("deleteItem",{index});
      this.songList = this.$store.state.songList
    }
  },
};
</script>
<style lang='scss' scoped>
.shade {
  position: fixed;
  bottom: 65%;
  left: 0;
  right: 0;
  top: 0;
  z-index: 999;
  background-color: $color-background-d;
}
.play-list {
  position: fixed;
  top: 35%;
  left: 3%;
  right: 3%;
  bottom: 0;
  z-index: 99;
  border-radius: 10px;
  padding: 20px 10px 0 10px;
  background-color: $color-background;
  .content {
    position: absolute;
    top: 45px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 10px;
    overflow: hidden;
    .list {
      .list-item {
        display: flex;
        justify-content: space-between;
        height: 35px;
        line-height: 35px;
        .item-name {
          width: 80%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          span:nth-child(2) {
            color: $color-text-l;
            font-size: $font-size-small-s;
          }
        }
        .delete {
          color: $color-text-l;
        }
      }
    }
  }
}
.active {
  color: red;
}
</style>